<template>
	<div :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from 'echarts';

export default {
	props: {
		height:{
			type:String,
			default:'70px'
		},
		width:{
			type:String,
			default:'100%'
		},
		id:{
			type:String,
			default:'ec'
		},
		color:{
            type:Array,
            default:['#56f8ff', '#6cabff']
        }
	},
	data() {
		return {
			chart:{}
		};
	},
	watch:{
		data(){
			this.init()
		}
	},
	methods:{
		init(){
            this.chart = echarts.init(this.$el);

            let option = {
                title: {
                text: '单位：宗',
                top: '6',
                left: 40,
                textStyle: {
                    color: '#fff',
                    fontSize: 16
                },
            },
            legend: {
                data: ["完成项目", ],
                top: "6",
                right: '4%',
                itemHeight: 15,
                itemWidth: 24,
                textStyle: {
                    color: "#ffffff",
                    fontSize: 18,
                    lineHeight: 16,
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '2%',
                right: '4%',
                bottom: '0',
                top: '35',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#fff'
                    }
                },
                axisLabel: {
                    interval: 0,
                    textStyle: {
                        color: '#fff',
                        fontSize: 16
                    }
                },
                axisTick: {
                    show: false
                },
                data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
            }, ],
            yAxis: [{
                axisTick: {
                    show: false
                },
                splitArea: {
                    show: true,
                    areaStyle: {
                        color: ["rgba(0,0,255,0.1)", "rgba(0,0,255,0.1)"]
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#1e2f86'
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: '#fff',
                        fontSize: 18
                    }
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#fff'
                    }
                },
            }, ],
            series: [{
                name: '完成项目',
                type: 'bar',
                barWidth: '30%',
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: this.color[0]
                        }, {
                            offset: 1,
                            color: this.color[1]
                        }]),
                        barBorderRadius: 12,
                    },
                },
                data: [400, 400, 300, 300, 300, 400, 400, 400, 300, 400, 300, 450]
            }, ]
            };

            this.chart.setOption(option);

            let this_ = this;
            var index = 0 // 播放所在下标
            setInterval(() => {
                this_.chart.dispatchAction({
                    type: 'showTip',
                    seriesIndex: 0, // 第几条series
                    dataIndex: index // 第几个tooltip
                })
                index++
                if (index > 12) {
                    index = 0
                }
            }, 1000)
		}
	},
	mounted() {
        setTimeout(() => {
			this.init()
		}, 20)
	},
};
</script>

<style scoped lang="less">
</style>
